<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>前端定位模块</title>
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no">
    <style>
        * {
            margin: 0;
            padding: 0;
            border: 0;
        }
        body {
            position: absolute;
            width: 100%;
            height: 100%;
            text-align: center;
        }
        #pos-area {
            background-color: #009DDC;
            margin-bottom: 10px;
            width: 100%;
            overflow: scroll;
            text-align: left;
            color: white;
        }
        #demo {
            padding: 8px;
            font-size: small;
        }
       #btn-area {
            height: 100px;
        }
        button {
            margin-bottom: 10px;
            padding: 12px 8px;
            width: 42%;
            border-radius: 8px;
            background-color: #009DDC;
            color: white;
        }
</style>
<script type="text/javascript" src="https://mapapi.qq.com/web/mapComponents/geoLocation/v/geolocation.min.js"></script>
</head>
<body>
    <div id="pos-area">
        fdsafsaffdsafd
    </div>
 
   
    <script type="text/JavaScript">
        var geolocation = new qq.maps.Geolocation("ZIHBZ-P5ICQ-OA55T-GVXOP-BPX4O-QUBHE", "myapp");
        var options = {timeout: 8000};
        window.setTimeout(function(){
        	geolocation.getLocation(showPosition, showErr, options);
        	console.log(1111);
        }, 1000);
        
        function showErr(){
        	console.log(2222);
        }
        
        function showPosition(position){
        	alert(position.lat);
        	alert(position.lng);
        	alert(JSON.stringify(position, null, 4));
        	console.log(position);
        }
 
     
    </script>
</body>
</html>